<template>
      <div class="monitor app-body" v-loading='loading'>
            <el-col :span="24" class="monitor-info">
                  <el-col :span="10" class="monitor-info-left">
                        <el-col :span="24" class="monitor-title">系统信息</el-col>
                        <el-table :data="systemInfo" style="width: 100%" :header-cell-style="$setting.table_header">
                              <el-table-column prop="key" label="属性" align="center"></el-table-column>
                              <el-table-column prop="value" label="值" align="center"></el-table-column>
                        </el-table>
                  </el-col>
                  <el-col :span="4" class="min-height"></el-col>
                  <el-col :span="10" class="monitor-info-left">
                        <el-col :span="24" class="monitor-title">运行监控</el-col>
                        <el-table :data="processInfo" style="width: 100%" :header-cell-style="$setting.table_header">
                              <el-table-column prop="key" label="属性" align="center"></el-table-column>
                              <el-table-column prop="value" label="值" align="center"></el-table-column>
                        </el-table>
                  </el-col>

                  <el-col :span="6" class="info-item">
                        <div class="progress-box">
                              <el-progress :stroke-width="16" :width="240" type="circle" :percentage="memoryInfo.percentage" color="#f56c6c" :show-text="false" ></el-progress>
                              <div class="circleCenter">
                                    <!-- <div>{{memoryInfo.memory.availableMemory+'MB'}}/{{memoryInfo.memory.totalMemory+'MB'}}</div> -->
                                    <div>物理内存使用率 {{memoryInfo.percentage+"%"}}</div>
                              </div>
                        </div>
                  </el-col>
                  <el-col :span="6" class="info-item">
                        <div class="progress-box">
                              <el-progress :stroke-width="16" :width="240" type="circle" :percentage="cpuInfo.systemCpuLoad" color="#f56c6c" :show-text="false" ></el-progress>
                              <div class="circleCenter">
                                    <div>物理CPU使用率 {{cpuInfo.systemCpuLoad+"%"}}</div>
                              </div>
                        </div>
                  </el-col>
                  <el-col :span="6" class="info-item">
                        <div class="progress-box">
                              <el-progress :stroke-width="16" :width="240" type="circle" :percentage="cpuInfo.processCpuLoad" color="#f56c6c" :show-text="false" ></el-progress>
                              <div class="circleCenter">
                                    <div>JVM CPU使用率 {{cpuInfo.processCpuLoad+"%"}}</div>
                              </div>
                        </div>
                  </el-col>
            </el-col>
      </div>
</template>

<script>
export default {
      props: [],
      data() {
            return {
                  systemInfo:[],// 系统信息
                  processInfo:[],// 运行信息
                  loading:true,// 是否加载
                  memoryInfo:{
                        memory:{},// 内存占用
                        percentage:0
                  },
                  cpuInfo:{}
                  
            }
      },
      methods:{
            /**初始化运行监控 */
            initProcessInfo(info){
                  this.processInfo=info;
            },
            /**初始化内存仪表盘 */
            initMemoryInfo(info){
                  this.memoryInfo.memory=info;
                  this.memoryInfo.percentage=100-((info.availableMemory/info.totalMemory)*100).toFixed(2);
                  let totalMemory={
                        key:'物理总内存',
                        value:info.totalMemory+'MB'
                  }
                  this.processInfo.push(totalMemory)
                  let availableMemory={
                        key:'可用物理内存',
                        value:info.availableMemory+'MB'
                  }
                  this.processInfo.push(availableMemory)
            },
            /**初始化Cpu信息 */
            initCpuInfo(info){
                  info.systemCpuLoad=Number((info.systemCpuLoad*100).toFixed(2));
                  info.processCpuLoad=Number((info.processCpuLoad*100).toFixed(2));
                  this.cpuInfo=info;
            }
      },
      mounted() {
            this.$axios.get(this.$url+'/admin/system/systemInfo').then(res=>{
                  this.systemInfo=res.data.data.systemInfo;
                  this.initProcessInfo(res.data.data.processInfo);
                  this.initMemoryInfo(res.data.data.memoryInfo[0]);
                  this.initCpuInfo(res.data.data.cpuInfo[0]);
                  
                  this.loading=false;
            })
      },
};
</script>

<style lang="less">
.monitor{
      user-select: none;

      .monitor-info{

            .monitor-info-left{
                  height: 500px;
                  background-color: #fff;
            }

            .info-item{
                  height: 300px;
                  padding: 0 30px;
            }

      }
      
}
.progress-box{
      position: relative;
      width: 240px;
      height: 240px;

      .circleCenter{
            position: absolute;
            top: 0;
            left: 0;
            // position: absolute;
            // // left:120px;
            width: 240px;
            height: 240px;
            line-height: 240px;
            text-align: center;
            font-weight: 700;
      }
}
.monitor-title{
      height: 60px;
      line-height: 60px;
      text-align: center;
      font-weight: 700;
}
</style>